<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>肇庆学院校标展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0A2463',
                        accent: '#E63946',
                        neutral: '#F8F9FA',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
           .content-auto {
                content-visibility: auto;
            }

           .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

           .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
            }

           .animate-float {
                animation: float 6s ease-in-out infinite;
            }

           .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }

           .clip-circle {
                clip-path: circle(0% at 50% 50%);
            }

           .clip-circle-full {
                clip-path: circle(100% at 50% 50%);
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }

            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body class="bg-gradient-to-br from-neutral to-blue-50 min-h-screen flex items-center justify-center overflow-hidden">
    <!-- 背景装饰元素 -->
    <div class="fixed inset-0 pointer-events-none">
        <div class="absolute top-10 left-10 w-20 h-20 rounded-full bg-primary/10 animate-pulse-slow"></div>
        <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-secondary/10 animate-pulse-slow"
            style="animation-delay: 1s;"></div>
        <div class="absolute top-1/3 right-1/4 w-16 h-16 rounded-full bg-accent/10 animate-pulse-slow"
            style="animation-delay: 2s;"></div>
    </div>

    <!-- 主容器 -->
    <div class="relative w-full max-w-4xl px-6 py-12 flex flex-col items-center justify-center">
        <!-- 校标容器 -->
        <div id="logo-container" class="relative w-64 h-64 md:w-80 md:h-80 mb-8 opacity-0 scale-50 transform-gpu transition-all duration-1000 ease-out">
            <!-- 水波纹效果 -->
            <div id="ripple" class="absolute inset-0 rounded-full bg-primary/20 scale-0 opacity-0 transition-all duration-1500 ease-out"></div>

            <!-- 校标 -->
            <div class="relative w-full h-full rounded-full overflow-hidden bg-white shadow-2xl flex items-center justify-center">
                <img src="https://ts1.tc.mm.bing.net/th/id/R-C.79edc9ade11c42c524362e822a0c289e?rik=vXhJFLkwA4%2bt3A&riu=http%3a%2f%2fwww.xuexili.com%2fuploads%2fallimg%2f2303%2f0Q64414U-2.png&ehk=qz0XCqyJ5xmTYIQuQu60RcTnJO%2fNkJoR%2b68YLYn1fJM%3d&risl=&pid=ImgRaw&r=0" alt="肇庆学院校标" class="w-full h-full object-cover">
            </div>
        </div>

        <!-- 学校名称 -->
        <div id="school-name" class="text-center opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-500">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-secondary text-shadow-lg">肇庆学院</h1>
            <p class="text-gray-600 mt-2 text-[clamp(1rem,2vw,1.25rem)]">Zhaoqing University</p>
        </div>

        <!-- 校训 -->
        <div id="motto" class="mt-8 text-center opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-700">
            <p class="text-primary font-medium text-[clamp(1.1rem,2vw,1.3rem)] italic">厚德    明智    博学    力行</p>
        </div>

        <!-- 底部信息 -->
        <div id="footer" class="absolute bottom-6 left-0 right-0 text-center text-gray-500 text-sm opacity-0 transition-opacity duration-1000 ease-out delay-1000">
            <p>© 2025 肇庆学院版权所有</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const logoContainer = document.getElementById('logo-container');
            const ripple = document.getElementById('ripple');
            const schoolName = document.getElementById('school-name');
            const motto = document.getElementById('motto');
            const footer = document.getElementById('footer');

            // 初始化粒子效果
            createParticles();

            // 延迟显示校标
            setTimeout(() => {
                // 显示校标 - 从中心绽放
                logoContainer.classList.remove('opacity-0', 'scale-50');
                logoContainer.classList.add('opacity-100', 'scale-100', 'animate-float');

                // 触发水波纹效果
                setTimeout(() => {
                    ripple.classList.remove('scale-0', 'opacity-0');
                    ripple.classList.add('scale-150', 'opacity-0');
                }, 300);

                // 显示学校名称
                setTimeout(() => {
                    schoolName.classList.remove('opacity-0', 'translate-y-8');
                    schoolName.classList.add('opacity-100', 'translate-y-0');

                    // 显示校训
                    setTimeout(() => {
                        motto.classList.remove('opacity-0', 'translate-y-8');
                        motto.classList.add('opacity-100', 'translate-y-0');

                        // 显示页脚
                        setTimeout(() => {
                            footer.classList.remove('opacity-0');
                            footer.classList.add('opacity-100');
                        }, 500);
                    }, 500);
                }, 800);
            }, 500);
        });

        // 创建粒子效果
        function createParticles() {
            const body = document.body;
            const particleCount = 30;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                const size = Math.random() * 5 + 1;
                const color = `rgba(${Math.floor(Math.random() * 22) + 22}, ${Math.floor(Math.random() * 93) + 93}, ${Math.floor(Math.random() * 255)}, ${Math.random() * 0.3 + 0.1})`;

                particle.style.position = 'fixed';
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.background = color;
                particle.style.borderRadius = '50%';
                particle.style.top = `${Math.random() * 100}vh`;
                particle.style.left = `${Math.random() * 100}vw`;
                particle.style.boxShadow = `0 0 ${Math.random() * 10 + 5}px ${color}`;
                particle.style.opacity = '0';
                particle.style.animation = `float ${Math.random() * 10 + 10}s ease-in-out ${Math.random() * 5}s infinite`;

                body.appendChild(particle);

                // 淡入效果
                setTimeout(() => {
                    particle.style.transition = 'opacity 2s ease-out';
                    particle.style.opacity = '1';
                }, i * 100);
            }
        }
    </script>
</body>

</html>